<template>
  <div class="forget-pwd-wrap">
    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">手机号</span>
        <div class="phone-con">
          <input type="text" class="phone-num" placeholder="请输入当前手机号" maxlength="11" v-model="mobile"/>
        </div>
      </div>
    </div>

    <div class="forget-verify-box">
      <div class="verify-con">
        <span class="verify-title">验证码</span>
        <div class="code-con">
          <div class="code-box">
            <input class="code" type="number" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请输入验证码"
                   v-model="code"/>
          </div>
          <timer-btn ref="timerBtn" class="mobile" v-on:run="sendCode"></timer-btn>
        </div>
      </div>
    </div>

    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">新密码</span>
        <div class="phone-con">
          <input type="password" class="phone-num" placeholder="请设置6-16位密码" maxlength="16" v-model="newPwd1"/>
        </div>
      </div>
    </div>
    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">确认密码</span>
        <div class="phone-con phone-dist">
          <input type="password" class="phone-num" placeholder="请再次输入新密码" maxlength="16" v-model="newPwd2"
                 @blur="inputBlur"/>
        </div>
      </div>
    </div>

    <button class="sure-text" type="button" @click="findPwd">确&nbsp;&nbsp;定</button>
  </div>
</template>


<script>
  import code from "../../../components/code";
  import {baseUrl, salt} from "../../../config/env";
  import md5 from 'js-md5';
  import {checkCode, checkPhone, checkPwd} from "../../../config/verify";

  export default {
    data() {
      return {
        mobile: "",
        code: "",
        newPwd1: "",
        newPwd2: "",//确认密码
        token1: "",
        token2: "",
        workId: this.$route.query.workId,
        typePage: this.$route.query.typePage
      }
    },
    methods: {
      affirmPwd() {
        let pwd1 = this.newPwd1;
        let pwd2 = this.newPwd2;
        if (pwd1 != pwd2) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      sendCode() {//获取验证码
        let phone = this.mobile;
        if (checkPhone(phone)) {
          this.$refs.timerBtn.setDisabled(true);
          this.axios.get(baseUrl + "/login/get_token?phone=" + phone + "&i=1").then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0 && resultObj.data != null) {
              this.token1 = resultObj.data;
              this.axios.get(baseUrl + "/login/send_code?phone=" + phone + "&i=1" + "&userToken=" + this.token1).then((res) => {
                let resultObj = res.data;
                if (resultObj.code == 0) {
                  this.token2 = resultObj.data;
                  this.$refs.timerBtn.start(); //启动倒计时
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  this.$refs.timerBtn.stop();
                }
              }).catch(function (error) {
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(function (error) {
            this.$vux.toast.text("网络异常", "middle");
          });

        }
      },
      findPwd() {
        let phone = this.mobile;
        let code = this.code;
        let pwd1 = this.newPwd1;
        if (checkPhone(phone) && checkCode(code) && checkPwd(pwd1, 2) && this.affirmPwd()) {
          this.axios.get(baseUrl + "/login/mate_code?phone=" + phone + "&i=1&code=" + code + "&token=" + this.token2).then((res) => {
            let mateObj = res.data;
            if (mateObj.code == 0) {
              this.$vux.loading.show({
                text: '加载中',
              });
              let data = {"phone": phone, "password": md5(md5(pwd1) + salt)};
              this.axios.post(baseUrl + "/login/set_psw", data).then((res) => {
                let resultObj = res.data;
                this.$vux.loading.hide();
                if (resultObj.code == 0 && resultObj.data == 1) {
                  if(this.typePage == 1){
                    this.$router.push({path: "/proxywork"});
                  }else{
                    this.$router.push({path: "/proxyworkdetail", query: {"workId": this.workId}});
                  }
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                }
              }).catch(() => {
                this.$vux.loading.hide();
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(mateObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      }
    },
    components: {
      "timer-btn": code
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl";

  .forget-pwd-wrap
    wh(100%, 100%);
    background: #f5f5f5
    .forget-wx-phone
      wh(100%, 1.333rem)
      background: #FFF
      display: flex
      .phone-box
        margin-left: 0.32rem
        display: flex;
        align-items: center
        width: 96.8%
        border-bottom: 0.027rem solid #f2f2f2
        .title
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .phone-con
          margin-left: 0.92rem
          .phone-num
            size-color(0.427rem, #333)
        .phone-dist
          margin-left: 0.493rem
    .forget-verify-box
      wh(100%, 1.333rem)
      background: #FFF
      display: flex
      .verify-con
        display: flex
        align-items: center
        margin-left: 0.32rem
        wh(96.8%, 1.333rem)
        background: #FFF
        border-bottom: 0.027rem solid #f2f2f2
        .verify-title
          size-color(0.427rem, rgba(51, 51, 51, 1))
          padding-right: 0.92rem
        .code-con
          display: flex
          align-items: center
          width: 7.147rem
          justify-content: space-between
          .code-box
            display: flex
            align-items: center
            width: 60%
            .code
              size-color(0.427rem, #333)
              width: 100%
          .mobile
            height: 0.8rem
            line-height: 0.8rem
            background: #FFF
            size-color(0.427rem, rgba(60, 175, 255, 1))
    .sure-text
      fj(center, center)
      margin: 1.2rem auto 0
      wh(9.04rem, 1.333rem)
      background: rgba(60, 175, 255, 1)
      border-radius: 0.107rem
      size-color(0.48rem, rgba(255, 255, 255, 1))
</style>
